<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="query">
        <el-form ref="form" :inline="true" size="small">
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.beginSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.endSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-button type="primary" plain size="small" @click="queryList()">查询
          </el-button>
        </el-form>
      </div>
      <div class="op">
        <el-button  type="primary" size="mini" @click="exportExcel()">导出</el-button>
      </div>
    </div>
    <div class="box-style" id="lineImg">
      <div class="top">
        <ad-table :data="waitList" u-table @sort-change="waitSortInitList"
                  :data-changes-scroll-top="waitIsScrollTop" :show-summary="waitSummary"
                  v-loading="waitInitLoading" @table-body-scroll="waitGetMoreList"
                  :searchQuery="waitSearchQuery" @search="waitGetInitList" @filter-change="waitFilterInitList"
                  :height="tableHeight" @cell-click="cellClick">
          <ad-table-column label="序号" type="index" ctype="index" fixed/>
          <ad-table-column label="订单号" prop="orderSubNo" fixed="left" ctype="orderNo" searchable href="/order/detail" id="orderId"/>
          <ad-table-column label="制单人" prop="createUserName" w="3c2f" searchable sortable/>
          <ad-table-column label="制单时间" prop="createTime" width="130" ctype="datetime" sortable/>
          <ad-table-column label="出发地" prop="startCode" queryPro="startName" ctype="city" w="3c2f" searchable/>
          <ad-table-column label="目的地" prop="destinationCode" queryPro="destinationName" ctype="city" w="3c2f"
                           searchable/>
          <ad-table-column label="车辆名称" prop="carName" w="4c2f" searchable/>
          <ad-table-column label="车架号" prop="vin" ctype="vin-2f" searchable/>
          <ad-table-column label="应付合计" prop="totalPayment" w="3c2f" sortable/>
          <ad-table-column label="已付合计" prop="totalPaymentHas" w="3c2f" sortable/>
          <ad-table-column label="未付合计" prop="totalPaymentUn" w="3c2f" sortable>
            <template slot-scope="{row}"><span class="un-red">{{row.totalPaymentUn}}</span></template>
          </ad-table-column>
          <u-table-column label="客户返款" align="center">
            <u-table-column label="应付" prop="kickback" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
                  <span>{{row.kickback == null ? '－' : row.kickback}}</span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.kickbackSettlementName}}</div>
                    <div>联系方式：{{row.kickbackSettlementPhone}}</div>
                    <div>结算方式：公司付款</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column label="已付" prop="kickbackHas" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span
                  :style="Number(row.kickbackHas) != 0 ? 'cursor:default' : 'cursor:default'">
                {{row.kickbackHas == null ? '－' : row.kickbackHas}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.kickbackSettlementName}}</div>
                    <div>联系方式：{{row.kickbackSettlementPhone}}</div>
                    <div>结算方式：公司付款</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column label="未付" prop="kickbackUn" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span :class="{'un-red': Number(row.kickbackUn) != 0}"
                    :style="row.kickbackUn != 0 ? 'cursor:pointer' : 'cursor:default'">
              {{row.kickbackUn == null ? '－' : row.kickbackUn}}</span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.kickbackSettlementName}}</div>
                    <div>联系方式：{{row.kickbackSettlementPhone}}</div>
                    <div>结算方式：公司付款</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
          </u-table-column>
          <u-table-column label="提车费" align="center">
            <u-table-column label="应付" prop="pick" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
                  <span>{{row.pick == null ? '－' : row.pick}}</span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.pickSettlementName}}</div>
                    <div>联系方式：{{row.pickSettlementPhone}}</div>
                    <div>结算方式：公司付款</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column label="已付" prop="pickHas" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span
                  :style="Number(row.pickHas) != 0 ? 'cursor:default' : 'cursor:default'">
                {{row.pickHas == null ? '－' : row.pickHas}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.pickSettlementName}}</div>
                    <div>联系方式：{{row.pickSettlementPhone}}</div>
                    <div>结算方式：公司付款</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column label="未付" prop="pickUn" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span :class="{'un-red': Number(row.pickUn) != 0}"
                    :style="row.pickUn != 0 ? 'cursor:pointer' : 'cursor:default'">
              {{row.pickUn == null ? '－' : row.pickUn}}</span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.pickSettlementName}}</div>
                    <div>联系方式：{{row.pickSettlementPhone}}</div>
                    <div>结算方式：公司付款</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
          </u-table-column>
          <u-table-column label="承运费" align="center">
            <u-table-column label="应付" prop="totalTransport" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start" disabled>
                  <span>{{row.totalTransport == null ? '－' : row.totalTransport}}</span>
                  <div slot="content">
                    <!-- <div>结算人：{{row.spotSettlementName}}</div>
                    <div>联系方式：{{row.spotSettlementPhone}}</div>
                    <div>结算方式：公司付款</div> -->
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column label="已付" prop="totalTransportHas" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start" disabled>
              <span
                  :style="Number(row.totalTransportHas) != 0 ? 'cursor:default' : 'cursor:default'">
                {{row.totalTransportHas == null ? '－' : row.totalTransportHas}}
              </span>
                  <div slot="content">
                    <!-- <div>结算人：{{row.slotSettlementName}}</div>
                    <div>联系方式：{{row.slotSettlementPhone}}</div>
                    <div>结算方式：公司付款</div> -->
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column label="未付" prop="totalTransportUn" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start" disabled>
              <span :class="{'un-red': Number(row.totalTransportUn) != 0}"
                    :style="row.totalTransportUn != 0 ? 'cursor:pointer' : 'cursor:default'">
              {{row.totalTransportUn == null ? '－' : row.totalTransportUn}}</span>
                  <div slot="content">
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
          </u-table-column>
          <u-table-column label="送车费" align="center">
            <u-table-column label="应付" prop="take" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
                  <span>{{row.take == null ? '－' : row.take}}</span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.takeSettlementName}}</div>
                    <div>联系方式：{{row.takeSettlementPhone}}</div>
                    <div>结算方式：公司付款</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column label="已付" prop="takeHas" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span
                  :style="Number(row.takeHas) != 0 ? 'cursor:default' : 'cursor:default'">
                {{row.takeHas == null ? '－' : row.takeHas}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.takeSettlementName}}</div>
                    <div>联系方式：{{row.takeSettlementPhone}}</div>
                    <div>结算方式：公司付款</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column label="未付" prop="takeUn" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span :class="{'un-red': Number(row.takeUn) != 0}"
                    :style="row.takeUn != 0 ? 'cursor:pointer' : 'cursor:default'">
              {{row.takeUn == null ? '－' : row.takeUn}}</span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.takeSettlementName}}</div>
                    <div>联系方式：{{row.takeSettlementPhone}}</div>
                    <div>结算方式：公司付款</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
          </u-table-column>
          <u-table-column label="其他费用" align="center">
            <u-table-column label="应付" prop="totalExtra" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start" disabled>
                  <span>{{row.totalExtra == null ? '－' : row.totalExtra}}</span>
                  <div slot="content">
                    <div>结算人：{{row.spotSettlementName}}</div>
                    <div>联系方式：{{row.spotSettlementPhone}}</div>
                    <div>结算方式：公司付款</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column label="已付" prop="totalExtraHas" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start" disabled>
              <span
                  :style="Number(row.totalExtraHas) != 0 ? 'cursor:pointer' : 'cursor:default'">
                {{row.totalExtraHas == null ? '－' : row.totalExtraHas}}
              </span>
                  <div slot="content">
                    <div>结算人：{{row.backSettlementName}}</div>
                    <div>联系方式：{{row.backSettlementPhone}}</div>
                    <div>结算方式：公司付款</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column label="未付" prop="totalExtraUn" sortable width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start" disabled>
              <span :class="{'un-red': Number(row.totalExtraUn) != 0}"
                    :style="row.totalExtraUn != 0 ? 'cursor:pointer' : 'cursor:default'">
              {{row.totalExtraUn == null ? '－' : row.totalExtraUn}}</span>
                  <div slot="content">
                    <!-- <div>结算人：{{row.backSettlementName}}</div>
                    <div>联系方式：{{row.backSettlementPhone}}</div>
                    <div>结算方式：公司付款</div> -->
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
          </u-table-column>
          <ad-table-column label="订单状态" prop="orderStatus" w="3c2f" dictName="order_status" filterable/>
          <ad-table-column label="公司名" prop="companyName" w="3c2f" searchable/>
          <ad-table-column label="客户" prop="linkmanName" w="3c2f" searchable/>
          <ad-table-column label="联系电话" prop="linkmanPhone" ctype="phone-2f" searchable/>
          <ad-table-column label="收货人" prop="consigneeName" w="3c2f" searchable/>
          <ad-table-column label="联系电话" prop="consigneePhone" ctype="phone-2f" searchable/>
          <ad-table-column label="订单备注" prop="orderRemark" ctype="remark"/>
        </ad-table>
      </div>
      <div id="bottom" class="bottom" style="min-height: 290px">
        <div class="title-bar" v-if="showBottom"
             style="height:36px;"></div>
        <div v-if="showBottom"
             style="text-align: center;margin: 40px auto;font-size: 14px;color:rgba(96,98,102,0.5);">
          <div style="height:44px;">
            <img :src="noData"/>
          </div>
          暂无内容
        </div>
        <div v-else>
          <div class="content">
            <div class="left" style="width: 500px">
              <div class="form-wrapper assign" style="position: relative">
                <h3 style="height: 34px;">结算操作</h3>
                <div style="position: absolute;right:12px;top:3px">
                  <el-button size="mini" :disabled="!deliverForm.type" type="primary" plain @click="save">保存</el-button>
                </div>
                <div class="scroll-y"
                     :style="{'display': 'inline-block','height':leftHeight,'overflow-x':'hidden','overflow-y':'auto'}">
                  <el-descriptions :column="2" border size="mini">
                    <el-descriptions-item :span="2" label="费用类型">
                      <value :model="deliverForm" prop="type" dictName="finance_type"
                             style="display: inline-block;"/>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="deliverForm.type==8" label="运输路线">
                      <el-select @change="transport_change" size="mini" style="margin: -5px 0;width: 100px"
                                 v-model="deliverForm.transportId" placeholder="请选择">
                        <el-option
                            v-for="item in transportArr"
                            :key="item.transportId"
                            :label="item.lineName"
                            :value="item.transportId">
                        </el-option>
                      </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="deliverForm.type==8" label="运单编号">
                      <el-select @change="transport_change" size="mini" style="margin: -5px 0;width: 120px"
                                 v-model="deliverForm.transportId" placeholder="请选择">
                        <el-option
                            v-for="item in transportArr"
                            :key="item.transportId"
                            :label="item.transportNo"
                            :value="item.transportId">
                        </el-option>
                      </el-select>
                    </el-descriptions-item>

                    <el-descriptions-item :span="2" v-if="deliverForm.type==9" label="费用选择">
                      <el-select @change="fee_change" size="mini" style="margin: -5px 0;"
                                 v-model="deliverForm.id" placeholder="请选择">
                        <el-option
                            v-for="item in otherArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                      </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item label="结算人">
                      <value :model="deliverForm" prop="settlementName"
                             style="display: inline-block;width:90px"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="结算电话">
                      <value :model="deliverForm" prop="settlementPhone"
                             style="display: inline-block;width:90px"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="未付金额">
                      <value :model="deliverForm" prop="uncollected" style="display: inline-block;width:90px"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="实付金额">
                      <el-input-number v-if="deliverForm.type" :controls="false" style="margin: -5px 0;width:160px"
                                       :disabled="!deliverForm.type" size="mini"
                                       v-model="deliverForm.settlementFee"/>
                      <value v-else :model="deliverForm" prop="settlementFee" style="display: inline-block;width:90px"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="渠道">
                      <ad-status-select v-if="deliverForm.type" style="margin: -5px 0;width: 150px" size="mini"
                                        :disabled="!deliverForm.type"
                                        v-model="deliverForm.channel" :dict="dict.finance_channel"/>
                      <value v-else :model="deliverForm" prop="channel"
                             style="display: inline-block;width:90px" dictName="finance_channel"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="结算时间">
                      <el-date-picker
                          v-if="deliverForm.type"
                          v-model="deliverForm.settlementTime"
                          type="datetime"
                          size="mini"
                          :disabled="!deliverForm.type"
                          style="width: 160px;margin: -5px 0;"
                          value-format="timestamp" format="yyyy-MM-dd HH:mm"
                          placeholder="选择时间">
                      </el-date-picker>
                      <value v-else :model="deliverForm" prop="settlementTime" style="display: inline-block;width:90px"
                             type="datetime"/>
                    </el-descriptions-item>

                    <el-descriptions-item label="付款凭证" :span="2">
                      <ad-upload v-if="deliverForm.type" style="margin: -4px 0" :disabled="!deliverForm.type"
                                 v-model="deliverForm.imgList"
                                 multiple/>
                      <div v-else class="noImg">
                        暂无图片
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="备注" :span="2">
                      <el-input v-if="deliverForm.type" style="margin: -5px 0;" :disabled="!deliverForm.type"
                                size="mini" maxLength="100"
                                v-model="deliverForm.remark"/>
                      <value v-else :model="deliverForm" prop="remark"/>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </div>
            <div class="middle" style="flex-shrink: 0;display: inline-block">
              <div class="form-wrapper driver" style="width:100%;">
                <h3>结算记录</h3>
              </div>
              <ad-table ref="plTable" id="editTable" class="editTable" @cell-click="cellClickBottom"
                        :data="deliverTableData" u-table
                        :height="bottomTabHeight">
                <!--                <ad-table-column label="序号" type="index" ctype="index" width="50"/>-->
                <ad-table-column operation width="50" :operates="operates"/>
                <ad-table-column label="操作人" prop="createUser" width="100"/>
<!--                <ad-table-column label="操作时间" prop="createTime" width="130" ctype="datetime"/>-->
                <ad-table-column label="结算时间" prop="settlementTime" width="130" ctype="datetime"/>
                <ad-table-column label="实付" prop="settlementFee" width="80"/>
                <ad-table-column label="渠道" prop="channel" width="80" dictName="finance_channel"/>
                <ad-table-column label="付款类型" prop="type" dictName="finance_type" width="80"/>
              </ad-table>
            </div>
            <div id="span8" class="right" :style="{'height':rightHeight,'position': 'relative'}">
              <div class="form-wrapper driver" style="width:100%;">
                <h3>结算详情</h3>
              </div>
              <div class="op" style="position: absolute;top:3px;right:5px;">
                <el-button v-if="!isEditDraw" :disabled="isRightEdit" size="mini" type="primary" plain
                           @click="editDelivery">修改
                </el-button>
                <el-button v-else size="mini" type="primary" plain @click="deliverSave()">
                  保存
                </el-button>
                <el-button v-show="isEditDraw" size="mini" type="primary" plain @click="isEditDraw=false">
                  取消
                </el-button>
              </div>
              <el-descriptions :column="2" border size="mini" style="overflow: auto;">
                <el-descriptions-item label="操作时间">
                  <value :model="data" prop="createTime" style="width: 110px;max-width:110px;display: inline-block;"
                         type="datetime"/>
                </el-descriptions-item>
                <el-descriptions-item label="操作人">
                  <value :model="data" prop="createUser" style="display: inline-block;"/>
                </el-descriptions-item>
                <el-descriptions-item label="结算人">
                  <value :model="data" prop="settlementUser"/>
                </el-descriptions-item>
                <el-descriptions-item label="结算电话">
                  <value :model="data" prop="settlementPhone"/>
                </el-descriptions-item>
                <el-descriptions-item label="付款类型">
                  <value :model="data" prop="type" dictName="finance_type"/>
                </el-descriptions-item>
                <el-descriptions-item label="结算时间">
                  <el-date-picker
                      v-if="isEditDraw"
                      v-model="data.settlementTime"
                      type="datetime"
                      size="mini"
                      style="width: 120px;margin: -5px 0;"
                      value-format="timestamp" format="yyyy-MM-dd HH:mm"
                      placeholder="选择时间">
                  </el-date-picker>
                  <value v-else :model="data" prop="settlementTime" type="datetime"/>
                </el-descriptions-item>
                <el-descriptions-item label="实付金额">
                  <el-input-number :controls="false" v-if="isEditDraw" size="mini" maxLength="6"
                                   v-model="data.settlementFee"
                                   style="width:100px;margin: -5px 0;"/>
                  <value v-else :model="data" prop="settlementFee"/>
                </el-descriptions-item>
                <el-descriptions-item label="渠道">
                  <ad-status-select style="margin: -5px 0;width: 120px" size="mini" v-if="isEditDraw"
                                    v-model="data.channel"
                                    :dict="dict.finance_channel"/>
                  <value v-else :model="data" prop="channel" dictName="finance_channel"/>
                </el-descriptions-item>
                <el-descriptions-item v-if="data.type==8" label="路线">
                  <value :model="data" prop="line" type="line"/>
                </el-descriptions-item>
                <el-descriptions-item v-if="data.type==8" label="运单号">
                  <value :model="data" prop="transportNo"/>
                </el-descriptions-item>
                <el-descriptions-item label="付款凭证" :span="2">
                  <div v-show="data.imgList.length==0 && !isEditDraw" class="noImg">
                    暂无图片
                  </div>
                  <div v-show="data.imgList.length>0" style="line-height: 16px">
                    <el-image v-if="!isEditDraw" v-for="url in data.imgList" :key="url" :src="url"
                              style="width: 90px; height: 58px;margin-right: 10px;"
                              :preview-src-list="data.imgList"></el-image>
                  </div>
                  <ad-upload v-show="isEditDraw" ref="adimg" multiple v-model="data.imgList"
                             style="line-height: 16px"/>

                </el-descriptions-item>
                <el-descriptions-item label="备注">
                  <value :model="data" prop="remark"/>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import AdSuggestion from '@/components/AdSuggestion'
  import AdTable from '@/components/AdTable'
  import AdTableColumn from '@/components/AdTable/AdTableColumn'
  import adTable from '@/mixins/adTable'
  import Value from '@/components/AdValue'
  import api, {get as waitApiGetList} from '@/api/finance/accountPay/wait';
  import AdUpload from '@/components/AdUpload'
  import noData from '@/assets/404_images/nodata.png';
  import SettlerManage from '@/components/SettlerManage';
  import DriverManage from '@/components/DriverManage'
  import AdStatusSelect from '@/components/AdStatusSelect'
  import AdStatusSelectNoclear from '@/components/AdStatusSelect/noClear'
  import findDict from '@/utils/dict'
  import {
    getCompanyList as getSuggestCompanyList
  } from '@/api/suggestion'
  import {parseStatus, parseCityCode} from '@/utils/code'
  import {download} from '@/api/data'
  import {downloadFile} from '@/utils/index'

  export default {
    name: 'finance-waitPay',
    components: {
      AdTable,
      AdTableColumn,
      AdSuggestion,
      Value,
      AdUpload,
      AdStatusSelect,
      AdStatusSelectNoclear,
      SettlerManage,
      DriverManage
    },
    computed: {
      ...mapGetters(['allCityData'])
    },
    dicts: ["order_status", "finance_channel", "finance_type", "fee_type"],
    mixins: [adTable([
      {name: 'wait', pk: 'code'},
    ])],
    data() {
      return {
        noData,
        showBottom: true,
        rightHeight: 'calc(36vh - 0px)',
        leftHeight: 'calc(36vh - 36px)',
        isEditDraw: false,
        isRightEdit: true,
        deliverForm: {
          channel: null,
          settlementName: null,
          settlementPhone: null,
          uncollected: null,
          settlementFee: undefined,
          settlementTime: new Date().getTime(),
          type: null,
          remark: null,
          orderId: null,
          imgList: [], //交付凭证图
        },
        searchQuery: {
          beginSearchTime: null,
          endSearchTime: null,
          paymentStatus: 0
        },
        tableHeight: 440,
        bottomTabHeight: 300,
        deliverTableData: [],
        data: {},
        transportArr: [],
        otherArr: [],
        operates: {
          list: [
            {
              label: '撤销',
              type: 'primary',
              icon: '',
              disabled: (index, row) => {
                if(row.origin==1||row.origin==2){
                  return true
                }else{
                  return false;
                }
              },
              method: (index, row) => {
                this.repeal(row, index);
              }
            }
          ]
        },
      }
    },
    created() {
      let self = this;
      self.waitGetInitList()
      setTimeout(function () {
        self.tableHeight = document.documentElement.clientHeight - document.getElementById('bottom').offsetHeight - 145;
        self.bottomTabHeight = document.getElementById('bottom').offsetHeight - 35;
      })

      if (this.detectZoom() == 100) {
        this.rightHeight = 'calc(36vh - 0px)'
        this.leftHeight = 'calc(36vh - 36px)'
      }
      if (this.detectZoom() == 125) {
        this.rightHeight = 'calc(36vh + 18px)'
        this.leftHeight = 'calc(36vh - 16px)'
      }
      self.dict = findDict();
    },
    methods: {
      waitApiGetList, parseStatus, getSuggestCompanyList,
      //导出
      exportExcel() {
        let self = this;
        download(`api/finance/payment/download`, self.searchQuery).then(res => {
          downloadFile(res.data, res.headers.downloadFileName, 'xlsx')
        })
      },
      detectZoom: function () {
        let ratio = 0,
          screen = window.screen,
          ua = navigator.userAgent.toLowerCase();

        if (window.devicePixelRatio !== undefined) {
          ratio = window.devicePixelRatio;
        } else if (~ua.indexOf('msie')) {
          if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
          }
        } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
          ratio = window.outerWidth / window.innerWidth;
        }

        if (ratio) {
          ratio = Math.round(ratio * 100);
        }
        return ratio;
      },
      //查询
      queryList: function () {
        let self = this;
        self.deliverTableData = [];
        self.showBottom = true;
        self.waitGetInitList()
      },
      //改变运单
      transport_change: function (val) {
        let self = this;
        let data = [];
        data = self.transportArr.filter(d => {
          return d.transportId == val
        })
        self.deliverForm.uncollected = data[0].transportUn
        self.deliverForm.settlementName = data[0].transportSettlementName;
        self.deliverForm.settlementPhone = data[0].transportSettlementPhone
        console.log(val)
      },
      //改变其他费用
      fee_change: function (val) {
        let self = this;
        let data = [];
        data = self.otherArr.filter(d => {
          return d.id == val
        })
        self.deliverForm.uncollected = data[0].unSettlement;
        self.deliverForm.settlementName = data[0].settlementName;
        self.deliverForm.settlementPhone = data[0].settlementPhone
        console.log(val)
      },
      //撤销
      repeal(row, index) {
        let self = this;
        self.$confirm('是否确定撤销?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.revoke(row.id).then(res => {
            if (res.code == 0) {
              self.$notify({
                title: '撤销',
                message: res.msg,
                position: 'bottom-right',
                type: 'success'
              });
              self.queryList();
            } else {
              self.$notify({
                title: '撤销',
                message: res.msg,
                position: 'bottom-right',
                type: 'error'
              });
            }
          })
        }).catch(() => {
        });
      },
      cellClick(row, column, event) {
        let self = this;
        self.transportArr = [];
        self.showBottom = true;
        self.isEditDraw = false;
        self.isRightEdit = true;
        self.data = {
          createUser: null,
          createTime: null,
          origin: null,
          settlementFee: undefined,
          settlementPhone: null,
          settlementTime: null,
          settlementUser: null,
          type: null,
          channel: null,
          imgList: []
        };
        self.deliverForm = {
          channel: null,
          settlementName: null,
          settlementPhone: null,
          uncollected: null,
          settlementFee: undefined,
          settlementTime: new Date().getTime(),
          type: null,
          remark: null,
          orderId: row.orderId,
          imgList: [], //交付凭证图
        };
        api.gegSettlementRecord({orderId: row.orderId,cpType:2}).then(res => {
          self.deliverTableData = res.data
          if (res.data.length > 0) {
            self.showBottom = false;
            self.getSettlementDetails(self.deliverTableData[0])
            setTimeout(function () {
              // self.deliverTableData.forEach((d, i) => {
              //   if (i == 0) {
              self.$refs.plTable.$refs.table.setCurrentRow(self.deliverTableData[0]);
              //   }
              // })
            }, 200)
          }
        });

        switch (column.property) {
          // 客户返款 - 未付
          case 'kickbackUn':
            if (Number(row.kickbackUn) != 0) {
              self.showBottom = false;
              self.deliverForm = {
                channel: null,
                settlementName: row.kickbackSettlementName,
                settlementPhone: row.kickbackSettlementPhone,
                uncollected: row.kickbackUn,
                settlementFee: undefined,
                settlementTime: new Date().getTime(),
                type: 5,
                remark: null,
                orderId: row.orderId,
                imgList: [], //交付凭证图
              };
            }
            break

          // 提车费 - 未付
          case 'pickUn':
            if (Number(row.pickUn) != 0) {
              self.showBottom = false;
              self.deliverForm = {
                channel: null,
                settlementName: row.pickSettlementName,
                settlementPhone: row.pickSettlementPhone,
                uncollected: row.pickUn,
                settlementFee: undefined,
                settlementTime: new Date().getTime(),
                type: 6,
                remark: null,
                orderId: row.orderId,
                imgList: [], //交付凭证图
              };
            }
            break

          // 承运费 - 未付
          case 'totalTransportUn':
            if (Number(row.totalTransportUn) != 0) {
              self.showBottom = false;
              self.deliverForm = {
                channel: null,
                settlementName: null,
                settlementPhone: null,
                uncollected: null,
                settlementFee: undefined,
                settlementTime: new Date().getTime(),
                type: 8,
                remark: null,
                orderId: row.orderId,
                imgList: [], //交付凭证图
              };
              api.getTransport(row.orderId).then(res => {
                res.data.forEach(d => {
                  d.startName = parseCityCode(self.allCityData, d.startCode)
                  d.endName = parseCityCode(self.allCityData, d.destinationCode)
                  d.lineName = d.startName + '-' + d.endName;
                })
                self.transportArr = res.data;
                console.log(self.transportArr)
              })
            }
            break

          // 送车费 - 未付
          case 'takeUn':
            if (Number(row.takeUn) != 0) {
              self.showBottom = false;
              self.deliverForm = {
                channel: null,
                settlementName: row.takeSettlementName,
                settlementPhone: row.takeSettlementPhone,
                uncollected: row.takeUn,
                settlementFee: undefined,
                settlementTime: new Date().getTime(),
                type: 7,
                remark: null,
                orderId: row.orderId,
                imgList: [], //交付凭证图
              };
            }
            break

          // 其他费用 - 未付
          case 'totalExtraUn':
            if (Number(row.totalExtraUn) != 0) {
              self.showBottom = false;
              self.deliverForm = {
                channel: null,
                settlementName: null,
                settlementPhone: null,
                uncollected: null,
                settlementFee: undefined,
                settlementTime: new Date().getTime(),
                type: 9,
                remark: null,
                orderId: row.orderId,
                imgList: [], //交付凭证图
              };
              api.getOther(row.orderId).then(res => {
                res.data.forEach(d => {
                  d.name = parseStatus(self.dict, 'fee_type', d.type)
                })
                self.otherArr = res.data;
              })
            }
            break
        }
      },
      cellClickBottom(row, column, event) {
        let self = this;
        self.getSettlementDetails(row)
      },
      //查询结算详情
      getSettlementDetails: function (row) {
        let self = this;
        let images = [];
        if (row.origin == 0) {
          self.isRightEdit = false;
        } else {
          self.isRightEdit = true;
        }
        if (row.type == 8) {
          row.line = row.startCode + ',' + row.destinationCode
        }
        self.data = {...row};
        setTimeout(function () {
          if (self.data.imgList.length > 0) {
            self.data.imgList.forEach((d, i) => {
              images.push({
                name: d,
                url: d
              })
            })
            self.$refs.adimg.images = [];
            self.$refs.adimg.images = images;
          }
        })
      },
      //修改
      editDelivery: function () {
        let self = this;
        self.isEditDraw = true;
      },
      //修改结算保存
      deliverSave: function () {
        let self = this;
        console.log(self.data)
        self.$confirm('是否确定保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.settlementSave(self.data).then(res => {
            if (res.code == 0) {
              self.$notify({
                title: '保存',
                message: res.msg,
                position: 'bottom-right',
                type: 'success'
              });
              self.queryList();
            } else {
              self.$notify({
                title: '保存',
                message: res.msg,
                position: 'bottom-right',
                type: 'error'
              });
            }
          })
        }).catch(() => {
        });

      },
      save() {
        let self = this;
        let ajaxData = {};
        if(self.deliverForm.channel==''||self.deliverForm.channel==null){
          self.$notify({
            title: '提示',
            message: '请选择渠道',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        if(self.deliverForm.settlementTime==''||self.deliverForm.settlementTime==null){
          self.$notify({
            title: '提示',
            message: '请选择结算时间',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        if(self.deliverForm.imgList.length==0){
          self.$notify({
            title: '提示',
            message: '请上传付款凭证',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        if (self.deliverForm.settlementFee && Number(self.deliverForm.settlementFee) <= Number(self.deliverForm.uncollected)) {
          self.$confirm('是否确定保存?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            ajaxData = {...self.deliverForm};
            if (self.deliverForm.type == 8) {  //承运费结算
              api.transportSave(ajaxData).then(res => {
                if (res.code == 0) {
                  self.$notify({
                    title: '保存',
                    message: res.msg,
                    position: 'bottom-right',
                    type: 'success'
                  });
                  self.queryList();
                } else {
                  self.$notify({
                    title: '保存',
                    message: res.msg,
                    position: 'bottom-right',
                    type: 'error'
                  });
                }
              })
            } else if (self.deliverForm.type == 9) { //其他费用
              api.otherSave(ajaxData).then(res => {
                if (res.code == 0) {
                  self.$notify({
                    title: '保存',
                    message: res.msg,
                    position: 'bottom-right',
                    type: 'success'
                  });
                  self.queryList();
                } else {
                  self.$notify({
                    title: '保存',
                    message: res.msg,
                    position: 'bottom-right',
                    type: 'error'
                  });
                }
              })
            } else {
              api.addSettlementPlus(ajaxData).then(res => {
                if (res.code == 0) {
                  self.$notify({
                    title: '保存',
                    message: res.msg,
                    position: 'bottom-right',
                    type: 'success'
                  });
                  self.queryList();
                } else {
                  self.$notify({
                    title: '保存',
                    message: res.msg,
                    position: 'bottom-right',
                    type: 'error'
                  });
                }
              })
            }
          }).catch(() => {
          });
        } else {
          self.$notify({
            title: '提示',
            message: '请填写实收金额并且不能大于未收金额！',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .page-table {
    display: flex;
    flex: 1;
    flex-direction: column;

    .box-style {
      display: flex;
      flex: 1;
      border: 1px solid #e3e3e3;
      flex-direction: column;
    }

    .top {
      display: flex;
      flex: 1;
      border-bottom: 1px solid #4da7fa;
      flex-direction: column;

      &:after {
        content: '';
        display: block;
        height: 4px;
        background: #4da7fa;
        opacity: 0.2;
      }

      .table-wrapper {
        flex: 1;
      }

      .table {
        flex: 1;
      }
    }

    .bottom {
      display: flex;
      height: 36vh;
      flex-direction: column;

      .title-bar {
        display: flex;
        line-height: 36px;
        background: #f5f5f5;
        border-bottom: 1px solid #e3e3e3;
        padding-left: 10px;
        flex-shrink: 0;

        .op {
          margin-left: auto;
          margin-right: 12px;
        }
      }

      .content {
        display: flex;
        flex: 1;
        overflow: hidden;

        .left {
          display: flex;

          &:after {
            content: '';
            display: block;
            width: 3px;
            background: #4da7fa;
            opacity: 0.2;
          }
        }

        .middle {
          display: flex;
        }

        .right {
          flex: 1;
          overflow: hidden;

          .table-wrapper {
            height: 100%;
          }
        }

        .form-wrapper {
          display: flex;
          flex: 1;
          flex-direction: column;
          width: 18vw;

          h3 {
            height: 35px;
            box-sizing: border-box;
          }

          .form-content {
            padding: 10px 10px 0 10px;
            box-sizing: border-box;
            overflow-y: auto;

            .el-form-item {
              margin-bottom: 10px;
            }
          }
        }
      }
    }

    .bottom {
      & > .title-bar {
        padding-left: 16px;
        border-bottom: 1px solid #bdd0e3;
        background: #f5f5f5;
        align-items: center;
      }

      h2 {
        font-size: 12px;
      }

      h3 {
        padding-left: 10px;
        border-bottom: 1px solid #e3e3e3;
        background: #f5f5f5;
        line-height: 30px;
        font-size: 12px;
      }

      //.left h3 { border-right: 1px solid #e3e3e3; }
      //.middle h3 { border-left: 1px solid #e3e3e3; }
      .right {
        border-left: 1px solid #e3e3e3;
      }
    }
  }
</style>